var obj = new URLSearchParams(location.search);
//获取地址栏url后面的id
console.log(obj);


  let id = localStorage.getItem('id');
  var pid = obj.get("id");
  console.log(pid);
/* 
    接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
    http://jx.xuzhixiang.top/ap/api/detail.php?id=1
    服务器返回json数据
    */
//根据商品id获取商品详情，调用接口
let url = "http://jx.xuzhixiang.top/ap/api/detail.php";
axios.get(url, { params: { id: pid } }).then((r) => {
  // console.log(r.data);
  //
  var pObj = r.data.data;
  console.log(pObj);

  //拼出商品的详情
  let str = `
      <div class="basic">
      <h2 class="f-ff2">${pObj.pname}</h2>
      <p class="sellpoint">${pObj.pdesc}</p>
      <p class="price ">
        <span class="rmb">¥</span>
        <em class="j-flag">${pObj.pprice}</em></p>
        <p class="s-fc3 salesinfo" style="left: 204px; top: 279px;">
          <em style="color:#cb3b3b;"></em>
        </p>
        <div class="m-coupons f-cb f-pr">
          <div class="title f-pr">促销: </div>
          <ul id="coupon-list" class="">
            <li class="lst"><span class="label">领券立享</span>
              <span class="">120元&nbsp;&nbsp;数码春季特惠,</span>
              <span>无门槛</span>
              <span class="s-fcLink f-hand" data-action="bindCoupon" data-coupon="MJQWD6WGE" data-point="0">领券</span>
            </li>
          </ul></div><div class="j-newskuctn"> 
          <div class="j-flag"><div class="size select select-time select-sku f-cb" id="sku-select-box-2001">
            <div class="title f-pr">
              <i class="u-icn u-icn-9"></i>
              <span class="qin">请选择</span>
              颜色 :<i data-action="clearSkuErr" class="u-icn u-icn-10" data-id="sku-select-box-2001"></i>
            </div>
            <ul class="f-cb" id="size">
              <li  class="  f-pr choose "><p class="f-ff2">黑色</p></li>
              <li  class="  f-pr choose "><p class="f-ff2">白色</p></li>
              <li  class="  f-pr choose "><p class="f-ff2">粉色</p></li>
              <li  class="  f-pr choose "><p class="f-ff2">米奇</p></li>
              <li  class="  f-pr choose "><p class="f-ff2">米妮</p></li>
              <li  class="  f-pr choose "><p class="f-ff2">唐老鸭-白</p></li>
            </ul>
          </div>
        </div>
      </div>
              <div class="j-count"> 
                <div class="count f-mgt20 j-numcount ">
                  <p class="number">数量 :</p>
                  <div id="digital-counter-new">
                    <div class="u-counter">
                      <a data-action="down_newsku" href="javascript:;" class="btn j-x btn-dis">
                        <i class="u-icn u-icn-27"></i></a>
                        <span class="tot">
                        <input type="number" value="1" class="text f-fs1 j-x punm" id="auto-id-3">
                        </span>
                          <a data-action="plus_newsku" href="javascript:;" class="btn j-x">
                            <i class="u-icn u-icn-28"></i></a>
                          </div>
                          <div style="margin-top:5px;left:-5px;display:none;" class="u-tips-err j-x">
                            <i class="f-ib"></i>请输入要购买的数量
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="m-services"><p>服务 : </p>
                  <div class="cnt" data-action="showService"
                  ><a class="service">7天无理由退货</a>
                  <a class="service">15天无忧换货</a>
                  <a class="service">满119包邮</a>
                  <a class="service">商家发货</a>
                  <a class="service">网易自营</a>
                </div>
              </div>
              <button onclick="addCarHandle()" style="background-color:#fff;
              border: none;">
              <p class="buyorjoin j-flag f-cb" id="buyFlag">
                <a data-action="buy" class="f-fl u-btn u-btn-white f-mgr10 " href="javascript:;">
                  立即购买</a>
                  <a class="f-fl u-btn u-btn-red u-btn-red-1 j-joincart" data-action="join" data-type="cart">
                    <i class="u-icn u-icn-7"></i>加入购物车</a>
                  </p>
                </div>
              </button>
</div>
       `;
  //.con 字符串给div
  document.querySelector(".n-info").innerHTML = str;
  //请求时异步的，要封装成函数，在拼接完字符串后调用
  cho();
});


//734194



// 加入购物车
function addCarHandle() {
  {
    console.log("加入购物车");
    // 5-2发起请求
    let uid = localStorage.getItem("id");
    let pnum = document.querySelector("#auto-id-3").value;
    console.log(pnum);
    let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
    axios
      .get(url, {
        params: {
          uid,
          pid,
          pnum,
        },
      })
      .then((r) => {
        console.log(r.data);
      });
    alert("成功")
  }
}

var imgArr1 = document.querySelectorAll(".imgArr");
// console.log(imgArr1);
//将伪数组转为真正的数组
var imgArr = Array.prototype.slice.call(imgArr1);
var big = document.querySelector("#big");
let str = "";
// var big =   document.querySelector("#big")
// console.log(imgArr);
// console.log(big);
function search2() {
  imgArr.forEach((v, i) => {
    //  console.log(i);

    imgArr[i].onclick = function () {
      //每次进来数组清空，保持数组中只有一个
      str = "";
      str += `
         <img  id="bigImg" src="../img/${i}.jpg" alt="">
         `;

      document.querySelector("#big").innerHTML = str;
    };
  });
}

/* 放大镜 */
//鼠标移入缩略图
//遮罩
search2();
thum.onmouseover = function () {
  var big = document.querySelector(".big");
  mask.style.display = "block";
  big.style.display = "block";

  document.onmousemove = function (e) {
    //目前是根据左上角跟随 var mouseX = e.clientX - thum.offsetLeft;
    var mouseX = e.clientX - thum.offsetLeft - mask.offsetWidth / 2;
    var mouseY = e.clientY - thum.offsetTop - mask.offsetHeight / 2;
    //  console.log(e.clientX);
    //  console.log(e.clientY);
    console.log(typeof thum.offsetLeft);
    //修改mask坐标，不越界。
    if (mouseX < 0) {
      //左
      mouseX = 0;
    }
    if (mouseX + mask.offsetWidth > thum.offsetWidth) {
      //右
      mouseX = thum.offsetWidth - mask.offsetWidth;
    }
    if (mouseY < 0) {
      // 上
      mouseY = 0;
    }
    if (mouseY + mask.offsetHeight > thum.offsetHeight) {
      mouseY = thum.offsetHeight - mask.offsetHeight;
    }
    // console.log(mouseX);
    //修改mask坐标
    mask.style.left = mouseX + "px";
    mask.style.top = mouseY + "px";
    //修改放大后图片的位置
    bigImg.style.left = -mouseX * 4 + "px";
    bigImg.style.top = -mouseY * 4 + "px";
  };
};

// 鼠标离开隐藏遮罩，清除移动事件
thum.onmouseleave = function () {
  //清除移动事件
  document.onmousemove = null;
  mask.style.display = "none";
  big.style.display = "none";
};


//5-1


//选择款式函数
function cho() {
/* 详情的款式选择 */
let choose1 = document.querySelectorAll("#size li");
// let choose2 = document.querySelectorAll("li");
let choose = Array.prototype.slice.call(choose1);
// console.log(choose1);
// console.log(choose2);
// console.log(choose);
  choose.forEach((v, i) => {
    choose[i].onclick = function () {
     
   
      console.log(i);
      console.log($("#size li").eq(this).siblings());

      // choose[i].style.border = "1px solid #d33a31";
      $(this).css("border"," 1px solid #d33a31").siblings().css("border","");

      // if (i == 0) {
      //   choose[i].style.border = "1px solid #d33a31";
      //   choose[i].nextElementSibling.style.border = "";
      //   choose[i].parentNode.children.style.border = ""
      // } else {
       
      //    choose[i].previousElementSibling.style.border = "";
      //    choose[i].style.border = "1px solid #d33a31";
      //    choose[i].nextElementSibling.style.border = "";
    
      // }
     
     

    };
   
  });
}
  


/* 吸顶悬浮 */
var navbar = document.querySelector(".n-topbar");
// console.log(navbar);
//导航栏的高度
var navbarTop = navbar.offsetTop;
// console.log(navbarTop);
window.onscroll = function () {
  //获取滚动距离
  var scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffsetTop ||
    document.body.scrollTop;
  /*  document.documentElement.scrollTo 获取当前页面滚动条的坐标 */
  //动态绑定
  //滚动元素 > 元素距离顶部的位置时添加类，否则移除类
  scrollTop > navbarTop
    ? navbar.classList.add("show")
    : navbar.classList.remove("show");
  // 控制占位内容是否显示 三目运算符
  // scrollTop > navbarTop
  //   ? position.classList.remove("hide")
  //   : position.classList.add("hide");
};

hot()
// 热门商品
function hot() {

  let hotArr = ""
  let id = localStorage.getItem('id');
  // var uid = id;
  console.log(id);
  // 初始为第0个商品
  var pagenum = 0;
  //一页多少个商品
  var pagesize = 4;
  //地址
  var url = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php';
  //商品列表 uid写死 成zhangh这个用户的uid  所有用户登陆以后都看117479 这个用户上传的商品
  let p = axios.get(url, {
    params: {
      uid: 131247,
      pagenum,
      pagesize
    }
  });
  p.then((r) => {
    console.log(id);
    //服务器返回数据
    console.log(r.data);
    //分析 商品数组
    produceArr = r.data.data;
    console.log(produceArr);
    //页面结构
    var str = '';
    produceArr.forEach((pobj) => {


      hotArr += `<li data-action="bircd" data-index="0"><div>
  <a class="cover f-pr f-blk j-statistics" href='../../project/html/item.html?id=${pobj.pid}'  target="_blank" ">
  
  <img src="${pobj.pimg}" class="f-img">
  
  <!--Regular if8--> <span class="buying f-pa"></span>
  <!--Regular if9-->
  <!--Regular if10-->
  </a>
  <div class="cnt f-tc">
  <h3 class="f-thide2">
 

  <a data-position="0" data-action="card" target="_blank" href='../../project/html/item.html?id=${pobj.pid}'>${pobj.pdesc}</a>
  </h3>
  
  <p class="txt f-thide">
 
  ¥<em>${pobj.pprice}</em>
  
  
  </p>
  
  </div>
  </div></li>`
    })
    document.querySelector("#hotGood").innerHTML = hotArr


  })
}